<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery test</title>

  <!-- 详见 https://www.bootcdn.cn/ -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <style>
    #log{
      height: 200px;
      width: 400px;
      margin-top: 10px;
      /* border-color: #f70; */
    }
  </style>
</head>
<body>
  <span> jQuery Test: </span>
  <button id="jqueryget">jQuery-Get</button>
  <button id="doJQueryPost">jQuery-Post</button>
  <button id="doJQuery">jQuery (normal-AJAX)</button>
  <br>
  <textarea id="log"></textarea>

  <script>
    var $log = $('#log')

    // jQuery Testing...
    $('#jqueryget').click(function() {
      console.log('click jQuery-Get')
      $.get('https://jsonplaceholder.typicode.com/todos/10',
      {
        title: 'Test',
        other: 'Other',
        tag: 9
      },
      function(data) {
        $log.val(JSON.stringify(data))
        console.log('response by GET:', data)
      })
    })
    
    $('#doJQueryPost').click(function(){
      console.log("click jQuery-Post")
      $.post('https://jsonplaceholder.typicode.com/posts',
      {title: "post test", age: 23},
      function(data) {
        $log.val(JSON.stringify(data))
        console.log('response by POST:', data)
      })
    })

    $('#doJQuery').click(function() {
      console.log('click jQuery (normal)')
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos/10',
        data: {name: 'Normal jQuery', age: 44},
        headers: {book: 'The world', price: 88.76, pages: 99},
        type: 'GET',
        timeout: 1000,
        success: function(data){
          $log.val(JSON.stringify(data))
          console.log('reponse by normal call', data)
        },
        error: function(err){
          console.log('error:', err.statusText, err)
        }
      })
    })
    
    $('span').click(function(){
      console.log("click span")
    })
  </script>
</body>
</html>